<template>
	<view>
		<view class="box">
			<view class="boximgbox">
				<button open-type="chooseAvatar" @chooseavatar="bindchooseavatar">
					<image class="boximg" :src="avatar" v-if="avatar"></image>
					<image class="boximg" src="../../static/index.png" v-else></image>
				</button>
				<!-- <view style="font-size: 18rpx;color: #626262;">
					点击头像更换
				</view> -->
			</view>
			<view class="boxnr" style="padding-bottom: 0rpx;margin-bottom: 32rpx;">
				<view class="boxnrz">
					头像
				</view>
				<button class="boxnryimgbox" open-type="chooseAvatar" @chooseavatar="bindchooseavatar">
					<image class="boximg" :src="avatar" v-if="avatar"></image>
					<image class="boximg" src="../../static/index.png" v-else></image>
				</button>
			</view>
			<view class="boxnr">
				<view class="boxnrz">
					昵称
				</view>
				<input class="boxnry" placeholder="请输入昵称" type="text" v-model="nickname">
			</view>
			<view class="boxnr">
				<view class="boxnrz">
					电话号
				</view>
				<input class="boxnry" placeholder="请输入电话号" type="tel" v-model="tel">
			</view>
			<view class="boxnr">
				<view class="boxnrz">
					微信号
				</view>
				<input class="boxnry" placeholder="请输入微信号" type="text" v-model="wechat">
			</view>
			<view class="but">
				<view class="butbut" @click="login">
					确认修改并返回
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad() {
			this.$get('/srapi/user/detail').then(res => {
				console.log('个人信息', res.data);
				this.nickname = res.data.nickname
				this.avatar = res.data.avatar
				this.tel = res.data.tel
				this.wechat = res.data.wechat
			})
		},
		data() {
			return {
				nickname: '',
				avatar: '',
				tel: '',
				wechat: '',
			};
		},
		methods: {
			login() {
				var phone = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
				if (!phone.test(this.tel)) {
					uni.showToast({
						icon: 'none',
						title: "请正确填写您的电话号！",
						duration: 2000
					});
					return
				}
				this.$post('/srapi/user/userinfo', {
					nickname: this.nickname,
					avatar: this.avatar,
					tel: this.tel,
					wechat: this.wechat,
				}).then(res => {
					if (res.code == 1) {
						uni.navigateBack();
					}
				})

			},
			bindchooseavatar(e) {
				let that = this
				console.log(e.detail.avatarUrl);
				that.img = e.detail.avatarUrl
				that.$upload(e.detail.avatarUrl).then(res => {
					console.log('res', res.data.url);
					that.avatar = res.data.url
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	button {
		width: 100%;
		height: 100%;
		margin: unset;
		background-color: #fff;
	}

	button:after {
		border: unset;
	}

	.box {
		background-color: #ffffff;
		padding: 30rpx;

		.boximgbox {
			width: 100%;
			text-align: center;
			padding: 94rpx 0 72rpx;
			margin-bottom: 20rpx;

			.boximg {
				width: 100rpx;
				height: 100rpx;
				border-radius: 12rpx;
				border: 1px solid #eeeeee;
			}

			border-bottom: 1px solid #eeeeee;
		}

		.boxnr {
			display: flex;
			justify-content: center;
			align-items: center;
			padding-bottom: 32rpx;
			margin-bottom: 32rpx;
			border-bottom: 1px solid #eeeeee;

			.boxnrz {
				width: 150rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;

			}

			.boxnry {
				width: 100%;
				height: 100%;
				flex: 1;
				text-align: left;
				font-size: 28rpx;
			}

			.boxnrimg {
				width: 16rpx;
				height: 30rpx;
			}

			.boxnryimgbox {
				width: 100%;
				height: 100%;
				flex: 1;
				text-align: right;
				font-size: 28rpx;

				.boximg {
					text-align: right;
					width: 100rpx;
					height: 100rpx;
					border-radius: 12rpx;
					border: 1px solid #eeeeee;
					background-color: #eeeeee;
				}
			}
		}
	}

	.but {
		position: fixed;
		bottom: 75rpx;
		left: 0;
		width: 750rpx;

		.butxy {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 26rpx;
			font-weight: 400;
			color: #000000;
			margin-bottom: 40rpx;

			.butxyimg {
				width: 30rpx;
				height: 30rpx;
				margin-right: 18rpx;
			}

			span {
				color: #4D84F9;
			}
		}

		.butbut {
			margin: 0 auto;
			width: 480rpx;
			height: 88rpx;
			background: #00d1b1;
			border-radius: 44rpx;
			box-shadow: -6rpx 0rpx 12rpx 6rpx rgba(0, 0, 0, 0.12);
			font-size: 30rpx;
			font-weight: 700;
			text-align: center;
			color: #ffffff;
			line-height: 88rpx;
		}
	}
</style>